<% presenter = Courses::ShowPresenter.new(self, @course) %>
<% content_for(:head) do %>
  <title><%= presenter.page_title %></title>
<% end %>
<div class="pb-8 bg-gray-50 ">
  <div class="relative md:pt-18 bg-primary-900">
    <div class="relative pb-1/2 md:pb-1/4 2xl:pb-1/5">
      <% if presenter.cover_image.present? %>
        <img
          class="absolute h-full w-full object-cover"
          src="<%= presenter.cover_image %>"
        />
      <% else %>
        <div
          class="course-show__cover-default absolute h-full w-full svg-bg-pattern-1"
        ></div>
      <% end %>
    </div>
  </div>
  <div class="px-3">
    <div class="flex flex-col md:flex-row lg:max-w-5xl mx-auto">
      <div class="flex-1">
        <div
          class="course-show__header-cta-container bg-white border-transparent shadow rounded-lg -mt-5 md:-mt-7 z-10 relative pt-4 pb-5 md:py-8"
        >
          <div class="flex md:flex-row flex-col">
            <div class="px-4 md:px-8 w-full">
              <h1 class="font-bold leading-snug">
                <%= @course.name %>
              </h1>
              <div class="mt-2">
                <%= @course.description %>
              </div>
            </div>
            <% if @course.public_preview? && @course.highlights.empty? %>
              <div
                class="w-full md:w-1/3 flex justify-center items-center mt-4 md:mt-0 px-4 md:px-8"
              >
                <a
                  href="<%= curriculum_course_path(@course) %>"
                  class="btn btn-primary btn-large w-full"
                >
                  <%= presenter.user_is_student? ? t('.continue_course') : t('.preview_course') %>
                </a>
              </div>
            <% end %>
            <% if @course.public_signup && @course.highlights.empty? %>
              <div
                class="w-full md:w-1/3 flex justify-center items-center mt-4 md:mt-0 px-4 md:px-8"
              >
                <a
                  href="<%= apply_course_path(@course) %>"
                  class="btn btn-success btn-large w-full"
                >
                  <%= t('.apply_now') %>
                </a>
              </div>
            <% end %>
          </div>
        </div>
        <div class="mt-4">
          <% if presenter.show_about? %>
            <div class="max-w-3xl mx-auto relative z-10 pb-6 md:pb-8">
              <div
                class="px-4 md:px-8 markdown-block markdown-block__permissive"
              >
                <div data-json-props="<%= presenter.markdown_prop(presenter.about) %>" class="convert-markdown">
                  <%= presenter.about %>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      </div>
      <% if @course.highlights.present? %>
        <div class="md:ms-4 md:w-1/3 flex flex-col justify-between">
          <div
            class="py-4 md:py-6 bg-white border-transparent shadow rounded-lg md:-mt-7 z-10 relative md:sticky md:top-0"
          >
            <div class="space-y-6 px-4 md:px-6">
              <% @course.highlights.map do |highlight| %>
                <div class="flex">
                  <div class="w-12">
                    <div
                      class="flex items-center justify-center h-10 w-10 shadow bg-primary-100 text-primary-400 rounded-full p-2"
                    >
                      <i class="<%="if text-lg i-#{highlight['icon']}"%>"></i>
                    </div>
                  </div>
                  <div class="ms-2">
                    <div class="text-sm font-bold">
                      <%= highlight['title']%>
                    </div>
                    <div class="text-xs">
                      <%= highlight['description']%>
                    </div>
                  </div>
                </div>
              <%end%>
            </div>
            <% if @course.public_preview? %>
              <div class="p-4 pb-0 md:p-6 md:pb-0">
                <a
                  href="<%= curriculum_course_path(@course) %>"
                  class="btn btn-primary btn-large w-full"
                >
                  <%= presenter.user_is_student? ? t('.continue_course') : t('.preview_course') %>
                </a>
              </div>
            <% end %>
            <% if @course.public_signup %>
              <div class="p-4 pb-0 md:p-6 md:pb-0">
                <a
                  href="<%= apply_course_path(@course) %>"
                  class="btn btn-success btn-large w-full"
                >
                  <%= t('.apply_now') %>
                </a>
              </div>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
    <div class="hidden md:block max-w-5xl mx-auto">
      <% if @course.public_signup %>
        <div
          class="course-show__footer-cta-container bg-white py-12 px-4 text-center mt-8 border-transparent shadow rounded-lg"
        >
          <h2 class="text-3xl leading-tight">
            <span class="font-normal"> <%= t(".enroll") %> </span>
            <span class="block font-bold">
              <%= @course.name %>
            </span>
          </h2>
          <a
            href="<%= apply_course_path(@course) %>"
            class="btn btn-large btn-success w-full sm:w-auto course-show__footer-cta-button shadow mt-3"
            ><%= t('.apply_now') %></a
          >
        </div>
      <% end %>
    </div>
  </div>
</div>
